import React, { Fragment, useMemo, useRef,useState } from "react";
import { Badge, Button, Popconfirm } from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

import {ProTable, type TableType, type IProTableRef } from "@yaf/pro-ui";
import { helper } from "@yaf/utils";
import { permission, EnumAuthKey, AuthCan } from "@/service";
import { useThemeToken } from "@/constants";
import { EnumVisibleTypeList } from './constants'

import { EnumMenuType } from './constants';
import { getDataAction, filterItems } from './proTableDriver';
import { CreateOrEditBtn } from './btn';
import { RespDataType, deleteMenu } from '../api';

interface ListProps { }

const List: React.FC<ListProps> = () => {
  const { themeToken } = useThemeToken();
  const proTableRef = useRef<IProTableRef>();
  const columns = useMemo(() => getColumns(proTableRef), [proTableRef]);
  const [isShow, setIsShow] = useState(false);

  return (
    <ProTable
      ref={proTableRef}
      dataAction={getDataAction(proTableRef, setIsShow)}
      rowKey={"id"}
      theme={themeToken.proTableToken}
      headerProps={{
        operatorProps: {
          btnList: [{
            authKey: EnumAuthKey.sysMenu.addButton,
            ExtendComponent: () => <CreateOrEditBtn type="primary" size="middle" optType="add" icon={<PlusOutlined />} fetchList={() => proTableRef.current.doFetchList()}>
              添加
            </CreateOrEditBtn>
          }].filter((item) => permission.can(item.authKey)),
        },
        filterProps: {
          maxWidth: "45%",
          filterItems
        }
      }}
      contentProps={{
        isShow,
        isShowRowSelection: false,
        tableProps: {
          columns,
          defaultExpandAllRows: true,
        }
      }}
      footerProps={{ isShow: false }}
      onError={(msg) => console.error(msg)}
    />
  )
}

export default List;

const getColumns = (proTableRef: React.MutableRefObject<IProTableRef>) => {
  const statusToInfo = helper.convertArrayToObj(EnumVisibleTypeList);
  const menuTypeToInfo = helper.convertArrayToObj(EnumMenuType);

  const columns: TableType.ColumnsType<RespDataType.MenuItem> = [
    {
      title: '菜单名称',
      dataIndex: 'title',
      // width: '35%',
    },
    {
      title: '路由路径',
      dataIndex: 'path',
      // width: '10%',
    },
    {
      title: 'api接口',
      dataIndex: 'name',
      // width: '10%',
    },
    {
      title: '状态',
      dataIndex: 'isHide',
      // width: '10%',
      render: (value) => {
        const { label, color } = statusToInfo[value];
        return <Badge color={color} text={label}/>
      }
    },
    {
      title: '类型',
      dataIndex: 'menuType',
      // width: '5%',
      render: (text: string) => menuTypeToInfo[text]?.label
    },
    {
      title: "操作",
      // width: '30%',
      render: (_, record) => <Fragment>
        <AuthCan authKey={EnumAuthKey.sysMenu.addButton}>
          <CreateOrEditBtn menuId={record.id} size="small" optType="add" icon={<PlusOutlined />} style={{ marginRight: 5 }} fetchList={() => proTableRef.current.doFetchList()}>添加</CreateOrEditBtn>
        </AuthCan>
        <AuthCan authKey={EnumAuthKey.sysMenu.editButton}>
          <CreateOrEditBtn menuId={record.id} size="small" optType="edit" editData={record} icon={<EditOutlined />} style={{ marginRight: 5 }} fetchList={() => proTableRef.current.doFetchList()}>编辑</CreateOrEditBtn>
        </AuthCan>

        <AuthCan authKey={EnumAuthKey.sysMenu.removeButton}>
          <Popconfirm
            title="确定删除?"
            okText="确定"
            cancelText="取消"
            onConfirm={() => new Promise((resolve, reject) => deleteMenu([record.id]).then(() => {
              proTableRef.current.doFetchList();
              resolve(true)
            }).catch((e) => reject(e)))}>
            <Button
              danger
              size="small"
              icon={<DeleteOutlined />}
              style={{ marginRight: 5 }}
            >
              删除
            </Button>
          </Popconfirm>
        </AuthCan>
      </Fragment>
    }
  ];

  return columns;
}
